<template>
	<div class="structure-chart-box" style="height: 100%">
		<vue3-tree-org
			:data="data"
			center
			:toolBar="toolBar"
			:disabled="true"
			:horizontal="false"
			:collapsable="true"
			:draggable="true"
			:scalable="false"
			:node-draggable="false"
			:default-expand-level="1"
			@on-node-click="onNodeClick"
		>
			<!-- 自定义节点内容 -->
			<template #default="{ node }">
				<div
					class="tree-org-node__text node-label"
					:class="{
						active: activeLabel === node.label,
					}"
				>
					<div>{{ node.label }}</div>
				</div>
			</template>
		</vue3-tree-org>
	</div>
</template>
<script setup>
import { ref } from "vue";

const toolBar = {
	scale: false,
	restore: false,
	expand: false,
	zoom: false,
	fullscreen: false,
};
// const data = {
//   id: 1,
//   label: "xxx科技有限公司",
//   children: [
//     {
//       id: 2,
//       pid: 1,
//       label: "产品研发部",
//       children: [
//         {id: 6, pid: 2, label: "禁止编辑节点"},
//         {id: 8, pid: 2, label: "禁止拖拽节点"},
//         {id: 10, pid: 2, label: "测试"},
//       ],
//     },
//     {
//       id: 3,
//       pid: 1,
//       label: "客服部",
//       children: [
//         {id: 11, pid: 3, label: "客服一部"},
//         {id: 12, pid: 3, label: "客服二部"},
//       ],
//     },
//     {id: 4, pid: 1, label: "业务部"},
//   ],
// };

const data = ref({});
let activeLabel = ref();

const initTreeOrgData = (orgData) => {
	activeLabel.value = orgData.children[0].label;
	data.value = orgData;
};

const emit = defineEmits(["onNodeClick"]);
const onNodeClick = (e, data) => {
	activeLabel.value = data.label;
	emit("onNodeClick", data);
};

defineExpose({
	initTreeOrgData,
});
</script>
<style lang="scss" scoped>
.structure-chart-box {
	width: 100%;
}
:deep(.zm-tree-org) {
	background-color: transparent;
}

.tree-org-node__text {
	text-align: left;
	padding: 10px 14px;
	background: url("@/assets/screenImg/powerImg/bg1.png") no-repeat;
	background-size: 100% 100%;
	font-size: 16px;
	font-family: FZLTXHK;
	color: #d8f0ff;
	line-height: 18px;
	&.active {
		color: #ff8b42;
	}
}
</style>
